<template>
	<view class="order-record-page">
		<!-- 订单列表 -->
		<view class="order-list">
			<view 
				v-for="order in orderList" 
				:key="order.id"
				class="order-card"
				@click="goToOrderDetail(order)"
			>
				<!-- 店铺名称和状态 -->
				<view class="order-header">
					<view class="shop-name">{{ order.venueName || '上海长宁龙之梦馆' }}</view>
					<wd-tag 
						v-if="order.produceStatus" 
						:type="order.produceStatus == 1 ? 'warning' : 'success'"
						size="small"
						class="status-tag"
					>
						{{ order.produceStatus == 1 ? '制作中' : '已完成' }}
					</wd-tag>
				</view>
				
				<!-- 商品列表 -->
				<view class="goods-list">
					<view 
						v-for="item in order.venueGoodsOrdersDetailEntityList" 
						:key="item.id"
						class="goods-item"
					>
						<image :src="item.cover || '/static/img/bg1.png'" class="goods-image" mode="aspectFill"></image>
						<view class="goods-info">
							<view class="goods-name">{{ item.goodsName || '' }}</view>
							<view class="goods-specs">{{ item.goodsDetail || '' }}</view>
						</view>
						<view class="goods-count">x{{ item.quantity || 1 }}</view>
					</view>
				</view>
				
				<!-- 订单底部信息 -->
				<view class="order-footer">
					<view class="order-left">
						<view class="order-number">取单号：{{ order.orderSn || '-' }}</view>
					</view>
					<view class="order-right">
						<view class="order-total">
							<text class="total-text">共{{ order.quantity || 1 }}件商品合计：</text>
							<text class="total-price">¥{{ order.totalAmount || 0 }}</text>
						</view>
						<view class="order-time">{{ order.finishTime || '' }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 加载更多 -->
		 <wd-loadmore v-if="dataList?.length>0" :state="loadmoreState" />
		 <!-- 暂无内容 -->
		 <wd-status-tip v-if="orderList?.length == 0" image="/static/viewNull.png"  :image-size="{ height: 50,  width: 50}" tip="暂无订单" />
	</view>
	<!-- loading加载 -->
	<fui-loading type="col" v-if="loadActive" :isFixed="true" :isMask="true"></fui-loading>
</template>

<script setup>
	import {useUserStore,} from '@/store/user';
	import { storeToRefs } from 'pinia'
	const userStore = useUserStore();
	const { userInfo } = storeToRefs(userStore);
	// 响应式数据
	const orderList = ref([]);//分页总数据
	const total = ref(0);//分页总条数
	const pageNo = ref(0);//分页当前页码 从0开始
	const loadActive = ref(false);
	const loadmoreState = ref('loading');
	const venueId = ref(null);

	/**
	 * 跳转到订单详情
	 */
	const goToOrderDetail = (order) => {
		uni.navigateTo({
			url: `/pagesA/view/waterBar/pickupCode?businessId=${order.id}`
		})
	}

	/**
	 * 获取订单数据
	 */
	const getPage = async (init) => {
		if(init){
			pageNo.value = 0;
			orderList.value = [];
		    loadActive.value = true;
		}
		const res = await uni.api.myGoodsOrderPage({
			pageNo: pageNo.value,
			venueId: venueId.value,
			userId: userInfo.value.id
		})
		if (res.code === 0 && res.data) {
			// orderList.value = res.data?.data || [];
			let list = res.data?.data || [];
			total.value = res.data.total;
			orderList.value = [...orderList.value,...list];
			loadmoreState.value = total.value > orderList.value?.length ? 'loading' : 'finished';

		}
		loadActive.value = false
	}
	// 触底加载
   onReachBottom(() => {
		if (total.value <= orderList.value?.length) {
			loadmoreState.value = 'finished';
			return
		};
		pageNo.value += 1;
		getPage()
	})

	// 页面加载
	onLoad((opt) => {
		venueId.value = opt.venueId;
		getPage(true)
	})
</script>

<style scoped lang="scss">
	.order-record-page {
		background: #f5f5f5;
		min-height: 100vh;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.order-list {
		.order-card {
			background: #fff;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			padding: 32rpx;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);

			.order-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 32rpx;

				.shop-name {
					font-size: 32rpx;
					color: #333;
					font-weight: 500;
				}

				.status-tag {
					flex-shrink: 0;
				}
			}

			.goods-list {
				margin-bottom: 40rpx;

				.goods-item {
					display: flex;
					align-items: center;
					margin-bottom: 24rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.goods-image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 12rpx;
						margin-right: 24rpx;
						flex-shrink: 0;
					}

					.goods-info {
						flex: 1;
						margin-right: 24rpx;

						.goods-name {
							font-size: 32rpx;
							color: #333;
							font-weight: 500;
							margin-bottom: 8rpx;
							line-height: 1.4;
						}

						.goods-specs {
							font-size: 28rpx;
							color: #999;
							line-height: 1.3;
						}
					}

					.goods-count {
						font-size: 32rpx;
						color: #999;
						font-weight: 400;
						min-width: 80rpx;
						text-align: right;
					}
				}
			}

			.order-footer {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;

				.order-left {
					.order-number {
						font-size: 28rpx;
						color: #333;
						font-weight: 500;
					}
				}

				.order-right {
					text-align: right;

					.order-total {
						margin-bottom: 8rpx;

						.total-text {
							font-size: 28rpx;
							color: #333;
						}

						.total-price {
							font-size: 28rpx;
							color: #333;
							font-weight: 600;
						}
					}

					.order-time {
						font-size: 24rpx;
						color: #999;
					}
				}
			}
		}
	}
</style>